<template>
  <div
    class="svg-icon"
    :style="styles"
    v-html="svgContent"
    @click="$emit('click')"
  ></div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue";
import { useTheme } from "~/composables/useTheme";

const props = defineProps({
  // SVG 文件名（不含扩展名）
  name: {
    type: String,
    required: true,
  },
  // 自定义颜色，可以是Tailwind颜色类名或CSS颜色值
  color: {
    type: String,
    default: "",
  },
  // 是否使用当前主题的主色
  primary: {
    type: Boolean,
    default: false,
  },
  // 宽度
  width: {
    type: [String, Number],
    default: "24px",
  },
  // 高度
  height: {
    type: [String, Number],
    default: "24px",
  },
});

const emit = defineEmits(["click"]);

// 使用主题相关的composable
const { currentThemeColor, isDark } = useTheme();

// 存储SVG内容
const svgContent = ref("");
// 加载状态
const isLoading = ref(false);
// 是否加载失败
const hasError = ref(false);

// 计算样式
const styles = computed(() => {
  const styleObj: Record<string, string> = {
    width: typeof props.width === "number" ? `${props.width}rem` : props.width,
    height:
      typeof props.height === "number" ? `${props.height}rem` : props.height,
    display: "inline-block",
  };
  return styleObj;
});

// 获取颜色值
const getColorValue = computed(() => {
  if (props.primary) {
    // 使用主题色
    return currentThemeColor.value.primary;
  } else if (props.color) {
    console.log(props.color);

    // 使用自定义颜色
    return props.color;
  } else {
    // 根据主题使用默认颜色
    return isDark.value ? "#ffffff" : "#000000";
  }
});

// 加载SVG文件
const loadSvg = async () => {
  if (!props.name) return;

  isLoading.value = true;
  hasError.value = false;

  try {
    const response = await fetch(`/images/svg/${props.name}.svg`);
    if (!response.ok) {
      throw new Error(`无法加载SVG: ${response.statusText}`);
    }
    let svg = await response.text();

    // 移除SVG中的fill属性，以便应用我们的颜色
    svg = svg.replace(/fill="[^"]*"/g, "");

    // 移除宽度和高度属性，以便应用我们的尺寸
    svg = svg.replace(/width="[^"]*"/g, "");
    svg = svg.replace(/height="[^"]*"/g, "");

    // 确保SVG有viewBox属性，如果没有则添加默认值
    if (!svg.includes("viewBox")) {
      svg = svg.replace("<svg", '<svg viewBox="0 0 24 24"');
    }

    // 添加我们自己的fill
    svg = svg.replace("<svg", `<svg fill="${getColorValue.value}"`);

    svgContent.value = svg;
  } catch (error) {
    console.error("加载SVG失败:", error);
    hasError.value = true;
    svgContent.value = "";
  } finally {
    isLoading.value = false;
  }
};

// 观察props变化重新加载SVG
watch(() => props.name, loadSvg);
watch(() => getColorValue.value, loadSvg);

// 组件挂载时加载SVG
onMounted(loadSvg);
</script>

<style scoped>
.svg-icon {
  line-height: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
